<template>
    <div class="newsinfo">
        <myheader title="图片详情":more="false":back="true"></myheader>
        <div class="wrap">
            <h1>{{newsinfo.title}}</h1>
            <p class="sbutitle">
                <span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
                <span>点击：{{newsinfo.click}}</span>
            </p>
            <p class="content" v-html="newsinfo.content"></p>
            <comment :artid="this.id"></comment>
        </div>
    </div>
</template>

<script>
    //  ./表示同一级的目录   。。/ 表示上一级目录  /表示下一级目录
    import myheader from '../../components/Header'
    import {Toast} from 'mint-ui'
    import comment from '../../components/comment'
    export default {
        name: "NewsInfo",

        props:['id'],
        data(){
            return{
                newsinfo:{},

            }
        },
        components:{
            myheader,
            comment
        },
        methods:{
            getNewInfo(id){
                this.$http.get('api/getnew/'+id).then(response=>{//成功的回调

                    this.newsinfo = response.body.message[0]

                },error=>{//失败的回调函数
                    Toast({
                        message: '获取详情数据失败',  //信息内容
                        position: 'middle',  //信息显示位置
                        duration: 500  //持续时间
                    })
                })
            }
        },
        created(){//生命周期页面加载时后数据还没渲染之前调用获取数据的方法
            this.getNewInfo(this.id)
        }
    }
</script>

<style scoped lang="scss" >
    @import "../../assets/style";
.newsinfo{
    .wrap{
        padding: 0 4px 50px;
        h1{
            font-size: 16px;
            color: red;
            text-align: center;
            margin: 15px 0;
        }
        .sbutitle{
            color: $primary-text-color;
            display: flex;
            justify-content: space-between;
            span{
                font-size: 10px;
            }
        }
        .content{
            text-indent: 20px;
        }
    }

}
</style>
